<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JAVA技术分享</title>
    <%@ include file="/WEB-INF/view/common/pace.jsp"%>
    <link type="text/css" media="all" href="<c:url value="/resources/js/spig/spig.css"/>" rel="stylesheet" />
</head>
<body>
    <!-- 导航栏	start -->
    <jsp:include page="/WEB-INF/view/common/header.jsp" />
    <!-- 导航栏    end -->
    
    <!-- 文章评论、赞  样式设置  start -->
    <!-- 
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/mobile-style.css"/>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/mobile-index-css.css"/>">
    <style type="text/css">
        .wrap ul li {
            background: #ffffff none repeat scroll 0 0;
            box-shadow: 1px 1px 3px #ccc;
            margin-bottom: 0;
        }
        .click_hf {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }
        .wrap {
            margin: 0;
        }
    </style>
     -->
    <!-- 文章评论、赞  样式设置  end -->
    
    <!-- 动画 start -->
    <div role="main" class="site clearfix">
        <div class="context-loader-container" id="site-container">
            <section class="aws-section" id="aws">
                <div class="leaf-header-container">
                    <div class="bg-animation">
                        <img width="300" src="http://www.htmleaf.com/templets/default/picture/cloud-1.png" class="cloud cloud-1" alt="Cloud-1"/> 
                        <img width="347" src="http://www.htmleaf.com/templets/default/picture/cloud-2.png" class="cloud cloud-2" alt="Cloud-2"/> 
                        <img width="50" src="http://www.htmleaf.com/templets/default/picture/corel.png" class="cloud corel" alt="corel"/> 
                        <img width="470" src="http://www.htmleaf.com/templets/default/picture/cloud-3.png" class="cloud cloud-3" alt="Cloud-3"/> 
                        <img width="762" src="http://www.htmleaf.com/templets/default/picture/cloud-4.png" class="cloud cloud-4" alt="Cloud-4"/> 
                        <img width="587"  src="http://www.htmleaf.com/templets/default/picture/cloud-5.png" class="cloud cloud-5" alt="Cloud-5"/> 
                        <img width="857" src="http://www.htmleaf.com/templets/default/picture/cloud-6.png" class="cloud cloud-6" alt="Cloud-6"/>
                    </div>
                    <div class="htmleaf-header-content">
                        <h2>J2EE技术分享<br> 自由分享 源码、Demo下载、高级技术实例教程</h2>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- 动画 end -->
    
    
    <div id="wrap">
        <div id="container">
            <div id="left_side">
                <!-- <div class="plugthumb">
                    <div class="tp">
                        <figure class="effect-bubba">
                            <img width="250" height="158" data-original="http://img.htmleaf.com/1507/201507281823.jpg"
                                src="http://img.htmleaf.com/1507/201507281823.jpg"
                                class="lazy" style="display: block;">
                            <figcaption>
                                <p>
                                    <i class="fa fa-eye"></i> 89
                                </p>
                                <p>
                                    <i class="fa fa-navicon"></i> UI界面设计
                                </p>
                                <p>Read More</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="plug-info">
                        <div class="plug-title">
                            <a href="http://www.htmleaf.com/css3/ui-design/201507282315.html"><b>一组黑色质感的蓝色荧光3D按钮和单选按钮</b></a>
                        </div>
                        <div class="plug-description">这是一组非常漂亮的纯CSS3黑色质感的蓝色荧光3D按钮和单选按钮特效。这组按钮中有三个按钮，一组单选按钮和一个很酷的超级按钮。它们都是黑色的样式，并带有蓝色的荧光，使它们看起来具有一些科幻色彩。
                        </div>
                    </div>
                    <div class="plug-mesg">
                        <ul>
                            <li><a href="http://www.htmleaf.com/css3/"><img  width="24" height="24" alt="css3" src="http://www.htmleaf.com/templets/default/images/css3-32.png"></a></li>
                        </ul>
                        <span class="pull-right">2015-07-28</span>
                    </div>
                </div> -->
            </div>
            <div id="content">
                <!-- 中间内容   start -->
                <div style="width: 100%; height: 100%;">
                    <!-- 
                    <div>
                        <img style="width: 100%; height: 100%;max-height: 380px;" alt="" src="<c:url value="/resources/images/xintai.jpg"/>">
                    </div>
                    <br/>
                    -->
                    <!-- 所在位置   start -->
                    <ol class="breadcrumb"
                        style="margin-top: 10px; width: 100%;">
                        <li class="active"><i class="fa fa-home">&nbsp;</i>当前位置：</li>
                        <li><a href="javascript:window.parent.location.href='<c:url value="/index/index"/>'">首页</a></li>
                        <c:forEach items="${articleQo.parentNames}" var="obj" varStatus="i">
                            <c:if test="${i.count != fn:length(articleQo.parentNames)}">
                                <li><a class="active">${obj}</a></li>
                            </c:if>
                            <c:if test="${i.count == fn:length(articleQo.parentNames)}">
                                <li>
                                    <a class="active" style="color: #777; text-decoration: none;">${obj}</a>
                                </li>
                            </c:if>
                        </c:forEach>
                    </ol>
                    <!-- 所在位置   end -->
                    
                    <!-- 文章列表    start -->
                    <div class="container-fluid" style="width: 100%; height: auto;margin-top: 20px;">
                        <div class="row">
                            <div class="col-xs-12">
                                <c:forEach items="${pageVo.result}" var="obj" varStatus="i">
                                    <!-- 
                                    <div <c:if test="${i.index % 6 == 0}">class="panel panel-success"</c:if>
                                         <c:if test="${i.index % 6 == 1}">class="panel panel-info"</c:if>
                                         <c:if test="${i.index % 6 == 2}">class="panel panel-primary"</c:if>
                                         <c:if test="${i.index % 6 == 3}">class="panel panel-warning"</c:if>
                                         <c:if test="${i.index % 6 == 4}">class="panel panel-danger"</c:if>
                                         <c:if test="${i.index % 6 == 5}">class="panel panel-default"</c:if>>
                                      -->
                                    
                                    <!-- 文章 start -->
                                    <div class="plugthumb">
                                        <div class="tp">
                                            <figure class="effect-bubba">
                                                <img width="250" height="158" data-original="http://img.htmleaf.com/1411/201411291537.jpg" src="<c:url value="/resources/images/loading.gif"/>" class="lazy">
                                                <figcaption>
                                                    <p>
                                                        <i class="fa fa-heart-o"></i>89
                                                    </p>
                                                    <p>
                                                        <i class="fa fa-leaf"></i>JAVA技术分享
                                                    </p>
                                                    <p>http://zhoubang85.com</p>
                                                </figcaption>
                                            </figure>
                                        </div>
                                        <div class="plug-info">
                                            <div class="plug-title">
                                                <a target="_blank" href="<c:url value="/article/articleDetail/${obj.id}"/>"><b>${obj.title}</b></a>
                                            </div>
                                            <div class="plug-description">
                                                ${obj.introduction}
                                            </div>
                                        </div>
                                        <div class="plug-mesg">
                                            <ul>
                                                <li>
                                                    <a href="http://www.htmleaf.com/css3/">
                                                    <img width="24" height="24" src="http://www.htmleaf.com/templets/default/images/css3-32.png"></a></li>
                                            </ul>
                                            <span class="pull-right" style="margin-top: -10px;" title="发布时间"><i class="fa fa-clock-o">&nbsp;</i><fmt:formatDate value="${obj.createTime}" pattern="yyyy-MM-dd hh:mm:ss"/></span>
                                        </div>
                                    </div>
                                    <!-- 文章 end -->
                                    
                                    <!-- 
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h2 class="panel-title" id="panel-title" style="padding-top: 50px;">
                                                <span class="label label-success" style="vertical-align: middle;">原创</span>
                                                <a target="_blank" style="margin-left: 10px;" href="<c:url value="/article/articleDetail/${obj.id}"/>">${obj.title}</a>
                                            </h2>
                                        </div>
                                        <div class="panel-body" style="height: 100px;">
                                            <span style="vertical-align: middle;">${obj.introduction}</span>
                                        </div>
                                    </div>
                                     -->
                                </c:forEach>
                            </div>
                        </div>
                        
                        <!-- 分页按钮    start -->
                        <jsp:include page="/WEB-INF/view/common/pagination.jsp"></jsp:include>
                        <!-- 分页按钮    end -->
                        
                    </div>
                    <!-- 文章列表    end -->
                </div>
                <!-- 中间内容   end -->

            </div>
            <div id="right_side">右侧内容</div>
        </div>
        <!-- <div id="footer">footer</div> -->
    </div>

    <input name="pageNo" type="hidden" value="${pageVo.pageNo}" />
    <input name="pageSize" type="hidden" value="${pageVo.pageSize}" />
    <input name="totalPage" type="hidden" value="${pageVo.totalPage}" />
    

    <script type='text/javascript' src="<c:url value="/resources/js/spig/spig.js"/>"></script>
    <script type='text/javascript' src="<c:url value="/resources/js/user/index.js"/>"></script>
</body>
</html>